<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>AI Brand Ambassador Voice Chat</title>
  <script src="https://elevenlabs.io/convai-widget/index.js" async type="text/javascript"></script>
  <style>
    body { font-family: Arial, sans-serif; text-align: center; margin-top: 60px; }
  </style>
</head>
<body>
  <h2>Talk with AI Brand Ambassador</h2>
  <p>Your MBTI type: <span id="mbti"></span></p>
  <p>Your group: <span id="group"></span></p>
  <p>Your user ID: <span id="user_id"></span></p>
  <div id="convai-container">
    <elevenlabs-convai id="ai-convai"></elevenlabs-convai>
  </div>
  <br>
  <button onclick="window.close()">✅ Done, close this page</button>
  <script>
    // Read URL params
    const params = new URLSearchParams(window.location.search);
    const agent_id = params.get('agent_id') || '';
    const mbti = params.get('mbti') || '';
    const group = params.get('group') || '';
    const user_id = params.get('user_id') || '';

    document.getElementById('mbti').textContent = mbti;
    document.getElementById('group').textContent = group;
    document.getElementById('user_id').textContent = user_id;

    // Set agent id
    if (agent_id) {
      document.getElementById('ai-convai').setAttribute('agent-id', agent_id);
    }
  </script>
</body>
</html>